<template>
	<view class="shop-item">
		<view class="flex shop-info">
			<image v-if="!type" class="shop-pic border-r10" :src="dataItem.logo" mode="" @click="onShopAvatarClick"/>
			<image v-else style="width: 240rpx;height: 240rpx;margin-left: 10rpx;" class="shop-pic border-r10" :src="dataItem.logo" mode="" @click="onShopAvatarClick"/>
			<view class="shop-info-box m-l-20 flex-1">
				<view class="shop-name flex flex-align-center flex-space-between">
					<view class="flex flex-align-center">
						<text class="font32 color-181D18 f-b">{{ dataItem.name }}</text>
						<view v-if="!type" class="status flex flex-align-center font28 color-3FA897">
							<!-- <view class="point"></view> -->
							<!-- 在线 -->
						</view>
					</view>
					<view v-if="!type" class="button-follow flex flex-center color-w font28 f-b" @click="onFollow">
						<image style="width: 32rpx;height: 30rpx; margin-right: 16rpx;" src="http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/home/ic_follow_w.png" mode=""></image>
						{{ isFollow ? '取消关注' : '关注' }}
					</view>
				</view>
				<view v-if="type" class="tags-box m-t-20 flex flex-align-center">
					<view class="tag-item flex flex-center font24 color-3FA897">实体商品</view>
				</view>
				<NumInfo :dataItem="dataItem" />
				<view v-if="!type" class="flex font28 color-8E8E8E m-t-20 flex-align-center flex-space-between">
					<view style="width: 420rpx;" class="text-ellipsis">介绍：{{ dataItem.store_intro }}</view>
					<view class="flex flex-align-center color-3FA897 font28" @click="onShopAvatarClick">
						查看更多
					</view>
				</view>
				<!-- <view class="bottom flex flex-align-center flex-space-between">
					<view class="flex flex-align-center">
						<text class="font28 color-8E8E8E">芳芳护理小店</text>
						<image class="m-l-20" style="width: 14rpx;height: 26rpx;" src="http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/my/arrow_r.png" mode=""></image>
					</view>
					<view class="button-book flex flex-center font28 color-w f-b">预约</view>
				</view> -->
			</view>
		</view>
		<view class="service-scroll m-t-30 flex" v-if="!type">
			<block v-for="(item, index) in dataItem.service" :key="index">
				<ServiceItem :dataItem="serviceItemData(item)" @click="toDetail" />
			</block>
		</view>
		<view class="line-box m-t-30">
			<view class="line"></view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, getCurrentInstance } from 'vue';
	import NumInfo from '@/components/numInfo/index.vue';
	import ServiceItem from '@/components/accompany/tabbar/index/mealItem/index.vue';
	
	const { proxy } = getCurrentInstance() as any;
	
	const props = defineProps({
		dataItem: {
			type: Object,
			default: {}
		},
		type: {
			type: String,
			default: ''
		}
	})
	
	const isFollow = ref(props.dataItem.isFollow);
	
	console.log(props.dataItem, "11");
	
	const onShopAvatarClick = () => {
		uni.navigateTo({
			url: `/pages/accompany-tmp/index/shopDetail/shopDetail?id=${props.dataItem.id}`
		})
	}
	
	const serviceItemData = (item) => {
		return {
			...item,
			name: item.title,
			price: `￥${item.sales_price}`,
		}
	}
	
	const onFollow = () => {
		
		const loginInfo = uni.getStorageSync('loginInfo');
		
		if(loginInfo && loginInfo.userId){
			const url = proxy.$API.merchantFollow;
			proxy.$UNIHTTP.postData(url, {
				merchantId: props.dataItem.id,
				userId: loginInfo.userId
			}).then(res => {
				console.log(res, "111111")
				if(res.code == 0){
					isFollow.value = !isFollow.value;
					uni.showToast({
						icon: 'success',
						title: isFollow.value ? '已关注' : '已取消'
					});
				}else{
					uni.showToast({
						icon: 'none',
						title: isFollow.value ? '取消失败' : '关注失败'
					});
				}
			}).finally(() => {
				uni.hideLoading();
			})
		}else{
			uni.showModal({
				title: '提示',
				content: '当前暂未登录，是否去登录',
				cancelText: '否',
				confirmText: '是',
				success(e) {
					if(e.confirm){
						uni.navigateTo({url: '/pages/accompany-tmp/my/login/login'});
					}
				}
			})
		}
		
		
	}
	
	const toDetail = (item) => {
		uni.navigateTo({url: `/pages/accompany-tmp/detail/detail?id=${item.id}`});
	}
</script>

<style lang="scss" scoped>
	.shop-pic {
		width: 152rpx;
		height: 152rpx;
	}
	.shop-item {
		padding: 30rpx 0;
	}
	.shop-info {
		padding: 0 10rpx;
	}
	.shop-info-box {
		padding-right: 10rpx;
	}
	.button-follow {
		height: 64rpx;
		padding: 0 20rpx;
		background: #3FA897;
		border-radius: 32rpx;
	}
	.status {
		margin-left: 20rpx;
		.point {
			width: 12rpx;
			height: 12rpx;
			background-color: #3FA897;
			border-radius: 50%;
			margin-right: 10rpx;
		}
	}
	.service-scroll {
		padding-left: 10rpx;
		overflow-x: scroll;
	}
	.service-scroll::-webkit-scrollbar {
		display: none;
	}
	.line-box {
		padding-left: 20rpx;
		.line {
			height: 1rpx;
			background-color: #E5E5E5;
		}
	}
	.tags-box {
		margin-bottom: 20rpx;
	}
	.tag-item {
		background-color: #E1F7EF;
		border-radius: 10rpx;
		height: 36rpx;
		padding: 0 12rpx;
		margin-right: 20rpx;
	}
	.bottom {
		margin-top: 40rpx;
	}
	.button-book {
		height: 64rpx;
		padding: 0 48rpx;
		border-radius: 32rpx;
		background-color: #3FA897;
	}
</style>
